<template>
  <wd-toast></wd-toast>
  <view class="login">
    <view class="login-main">
      <view style="text-align: center;width: 100%">
        <image src="@/static/logo.png" style="height: 400rpx;width: 560rpx"></image>
      </view>
<!--      <text class="login-main-title">欢迎登陆</text>-->
<!--      <view class="login-main-subtitle">樟木实业有限公司</view>-->
      <view class="login-main-body">
        <view class="h-30"></view>
        <div class="flex justify-center">
          <wd-radio-group v-model="type" shape="button" checked-color="#000">
            <wd-radio :value="0">司机登陆</wd-radio>
            <wd-radio :value="1">队长登陆</wd-radio>
          </wd-radio-group>
        </div>
        <view class="h-20"></view>
        <wd-input key="username" label-width="115rpx" label="姓名：" v-model="name" clearable placeholder="请输入姓名" :maxlength="20"></wd-input>
        <view class="border border-full h-1"></view>
        <wd-input key="username" label-width="115rpx" label="手机号：" v-model="username" type="number" clearable placeholder="请输入手机号" :maxlength="20"></wd-input>
        <wd-input key="username" label-width="115rpx" label="验证码：" :focus="codeFocus" v-model="code" type="number" clearable placeholder="请输入验证码" :use-suffix-slot="true">
          <template #suffix>
            <wd-button style="width: 200rpx" type="success" size="small" @click="getCode">{{ time < 60 ? time : '获取验证码' }}</wd-button>
          </template>
        </wd-input>
        <view class="login-password">
          <wd-divider>如未开通，请联系{{ type == 1 ? '管理员' : '队长' }}开通账号</wd-divider>
          <view class="h-20"></view>
          <wd-button size="large" block type="success" :disabled="disabled" @click="doLogin">登录</wd-button>
          <view class="h-20"></view>
          <view style="color:#ffffff;font-size: 28rpx" class="text-center" @click="openPrivacyContract">
            <wd-checkbox :modelValue="isAuth" shape="square"><text style="color: #ffffff">《用户隐私保护指引》</text></wd-checkbox>
          </view>
        </view>
      </view>
    </view>
    <view class="login-footer">
<!--      <view style="color:#ffffff" @click="openPrivacyContract">《用户隐私保护指引》</view>-->
    </view>
  </view>
</template>

<script lang="ts" setup>
import DemoApi from '@/api/DemoApi'
// import LoginInput from './cmp/LoginInput.vue'
import { useToast } from 'wot-design-uni/components/wd-toast'

const username = ref<string>('') // 用户名
const name = ref<string>('') // 密码
// 验证码
const code = ref('')
const type = ref<number>(0) // 单选框
const toast = useToast()
const { userInfo } = storeToRefs(useAuthStore()) // 解构pinia的store
const router = useRouter() // 路由

// 登录按钮是否禁用
const disabled = computed(() => {
  return !username.value || !name.value || !code.value
})

// 验证码焦点
const codeFocus = ref(false)
const codekey = ref('')
// 验证码倒计时
let time = ref(60)
let timer: any = null
// 获取验证码
function getCode() {
  // 判断手机号
  if (!username.value) {
    toast.error('请输入手机号')
    return
  }
  // 判断手机号是否正确
  if (!/^1[3456789]\d{9}$/.test(username.value)) {
    toast.error('请输入正确的手机号')
    return
  }
  toast.loading({ loadingType: 'ring', msg: '获取中' })
  //发送短信
  uni.request({
    url: 'https://miniapp.zhangmushiye.com/api/blade-auth/sms/send',
    method: 'GET',
    data: {
      tell: username.value
    },
    success: (res) => {
      codeFocus.value = true
      if (res.data.ok) {
        codekey.value = res.data.key
        toast.success('发送成功')
        timer = setInterval(() => {
          time.value--
          if (time.value <= 0) {
            clearInterval(timer)
            time.value = 60
          }
        }, 1000)
      } else {
        toast.error(res.data.msg)
      }
    }
  })
}
// 登录接口
async function doLogin() {
  // DemoApi.login({ mobile: username.value, name: name.value })
  //     .then((resp) => {
  //       if (!resp.data.length) {
  //         toast.close()
  //         toast.error('账号不存在')
  //         return
  //       }
  //       toast.close()
  //       toast.success('登录成功')
  //       userInfo.value = resp.data[0]
  //       router.replaceAll({ name: 'home' })
  //     })
  //     .catch((error) => {
  //       toast.close()
  //       toast.error(error.msg)
  //     })
  // return
  if (!isAuth.value) {
    toast.error('请先阅读《用户隐私保护指引》')
    return
  }
  toast.loading({ loadingType: 'ring', msg: '登录中' })
  uni.request({
    url: 'https://miniapp.zhangmushiye.com/api/blade-auth/sms/chack?code=' + code.value,
    method: 'GET',
    header: {
      'Phone-Msg-Key': codekey.value,
      'Phone-Key': username.value
    },
    success: (res) => {
      if (res.data.data) {
        if (type.value) {
          DemoApi.leaderLogin({ mobile: username.value, name: name.value })
              .then((resp) => {
                if (!resp.data.length) {
                  toast.close()
                  toast.error('账号不存在')
                  return
                }
                toast.close()
                toast.success('登录成功')
                let user = resp.data[0]
                user.type = 1
                user.xiangmuList = JSON.stringify(resp.data.map((item) => {
                  item.xiangmuList = item.COL_3
                  return item
                }))
                userInfo.value = user
                router.replaceAll({ name: 'home' })
              })
              .catch((error) => {
                toast.close()
                toast.error(error.msg)
              })
        } else {
          DemoApi.login({ mobile: username.value, name: name.value })
              .then((resp) => {
                if (!resp.data.length) {
                  toast.close()
                  toast.error('账号不存在')
                  return
                }
                toast.close()
                toast.success('登录成功')
                userInfo.value = resp.data[0]
                router.replaceAll({ name: 'home' })
              })
              .catch((error) => {
                toast.close()
                toast.error(error.msg)
              })
        }
      } else {
        toast.close()
        toast.error('验证码错误')
        return
      }
    }
  })
}

// 隐私是否授权
const isAuth = ref(false)
const openPrivacyContract = () => {
  wx.openPrivacyContract({
    success: (res) => {
      isAuth.value = true
    },
    fail: (err) => {
      isAuth.value = false
    }
  })
}
</script>

<style lang="scss" scoped>
.login {
  font-family: PingFangSC-Regular, PingFang SC;
  background-image: url('https://pic.imgdb.cn/item/65796604c458853aef1aec2a.jpg');
  height: calc(100vh - var(--window-top));
  width: 100vw;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-size: 100% 100%;

  &-main {
    padding: 75rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    &-title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 64rpx;
      font-size: 48rpx;
      font-weight: 600;
      // color: $color-text-secondary;
      line-height: 64rpx;
      letter-spacing: 8rpx;
      color: #ffffff;
    }

    &-subtitle {
      font-size: 28rpx;
      // color: $color-text-thirdly;
      line-height: 40rpx;
      letter-spacing: 12rpx;
      text-align: center;
      margin: 8rpx 0 104rpx;
      color: #fff;
    }

    &-body {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      height: 548rpx;
      border-radius: 30rpx;
      background-color: rgba(255, 255, 255, 1);
      padding: 20rpx 20rpx 90rpx 20rpx;
      margin-top: 100rpx;
      .login-password {
        padding: 10rpx;
      }
    }
  }

  &-footer {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 50rpx;
    text-align: center;
    line-height: 28rpx;
    font-size: 20rpx;
    font-weight: 500;
    bottom: 50rpx;
  }
}
:deep(.wd-input){
  background: transparent !important;
}

:deep(.wd-radio-group){
  background: transparent !important;
}
</style>
